import React, { Component } from 'react'
import { HomeApi } from '../request/api'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import "./less/Home.less"
import books from '../images/home/books.png'
import examination from '../images/home/examination.png'
import practice from '../images/home/practice.png'
import subject from '../images/home/subject.png'
import LinearProgress from '@material-ui/core/LinearProgress';


class Home extends Component {
    state = {
        collect: 0,
        exam: {},
        exemItems: [],
        study: 0,
        wrong: 0
    }
    componentDidMount() {
        let token = localStorage.getItem("x-auth-token")
        if (token) {
            HomeApi().then(res => {
                console.log(res.data)
                if (res.errCode === 0) {
                    let { collect, exam, exemItems, study, wrong } = res.data;
                    this.setState({ collect, exam, exemItems, study, wrong })
                }
            })
        } else {
            // 显示loading
            this.props.showLoadingFn();
            setTimeout(() => {
                // 隐藏loading
                this.props.hideLoadingFn();
                // 跳转登录页
                this.props.history.push('/login')
            }, 2000)

        }
    }
    render() {
        return (
            <div className="home">
                <div className="top">
                    <h2>IT客面试题</h2>
                    <Link to="/toggle"><span>切换考试科目</span> <i className="iconfont icon-xiangyou"></i></Link>
                </div>
                <div className="banner">
                    <div className="welcome">欢迎IT客来到乐学学习库！</div>
                    <div className="right">
                        <div className="right_l">
                            <h3>已学{this.state.study}题</h3>
                            <div className="score">{this.state.wrong}</div>
                            <span>错题</span>
                        </div>
                        <div className="right_l right_r">
                            <h3>共{this.state.exam.itemCount}题</h3>
                            <div className="score">{this.state.collect}</div>
                            <span>收藏</span>
                        </div>
                    </div>
                </div>
                <div className="ad">
                    <a href="https://leetcode.cn/leetbook/"><img src={examination} alt="" /></a>
                    <a href='https://leetcode.cn/company/'><img src={books} alt="" /></a>
                    <a href="https://leetcode.cn/problemset/all/"><img src={practice} alt="" /></a>
                </div>
                <div className="title">
                    <h3>学科题库</h3>
                    <span>坚持每一天，成长看得见</span>
                </div>
                <ul className="list">
                    {
                        this.state.exemItems.map(item => (
                            <li key={item.id}>
                                <img src={subject} alt="" />
                                <section>
                                    <h3>{item.title}</h3>
                                    <main>{item.itemCount}/{item.itemCount}题</main>
                                    <LinearProgress variant="determinate" value={100} />
                                </section>
                                <div className="btn" onClick={()=>this.props.history.push(`/practice/${item.actionCode}`)}>练习</div>
                            </li>
                        ))
                    }

                </ul>
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        showLoadingFn() {
            dispatch({ type: "showLoadingFn" })
        },
        hideLoadingFn() {
            dispatch({ type: "hideLoadingFn" })
        }
    }
}

export default connect(null, mapDispatchToProps)(Home)